<template>
  <div id="warp">
        <!-- 顶部切换按钮 -->
        <div>
            <button class="btn" @click="topBtnClick">上一页</button>
            <button class="btn" @click="bottomBtnClick">下一页</button>
        </div>
        <!-- 内容区域 -->
        <div>
            <ul class="imgdiv">
                <!-- <li v-for="(item, index) in imgArr" :key="index" style="z-index: 1;"> <img :src="item" alt=""> </li> -->
                <img :src="imgArr[currentIndex]" alt="Image" />
            </ul>
        </div>
        
  </div>
</template>

<script lang="ts">
export default {
  name: 'ComponentName',
  props: {
  
  },
  data() {//数据
    //图片数组
    const imgArr = [
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.5AmeaglwRvHzzdbFVQcJ-QHaNK?rs=1&pid=ImgDetMain',
        'https://ts1.cn.mm.bing.net/th/id/R-C.40b20d7f957acd21816d8f2f4b6b281c?rik=t84hzwSRHZl76Q&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f07%2f27%2fvtba42j0ldr.jpg&ehk=koTk1dC89ASqZg8odeoC%2fVMcuv9IEfaf7JR0heevIpE%3d&risl=&pid=ImgRaw&r=0',
        'https://pic4.zhimg.com/v2-efd4f4517d5bdb43858a04f7e4ff5f7f_r.jpg',
        'https://img.keaitupian.cn/uploads/2020/12/08/273813a415dbe086179ec092b693e8bb.jpg',
        'https://pic1.zhimg.com/v2-b9a5ba89b1e365d15838d0d5c8f36640_r.jpg']
    return {//返回值
        imgArr,
        currentIndex: 0 // 当前显示的图片索引
    };
  },
  methods: {//方法
    topBtnClick() {
        console.log('上一页');
        if (this.currentIndex > 0) { // 检查是否可以向上切换
        this.currentIndex--;
      } else {
        this.currentIndex=this.imgArr.length-1;
      }
    },
    bottomBtnClick() {
        console.log('下一页');
        //点击下一页按钮，图片滚动到下一页
        if (this.currentIndex < this.imgArr.length - 1) { // 检查是否可以向下切换
        this.currentIndex++;
      } else {
        this.currentIndex=0;
      }
  }
}
}
</script>
//样式
<style>
  .btn {
    width: 100px;
    height: 50px;
    background-color: #f00;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
    }
    .imgdiv {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        background-color: aquamarine;
        }
    .imgdiv li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .imgdiv li img {
        width: 100%;
        height: 100%;
        /* object-fit: cover;//图片缩放 */
        /* object-position: center center;//图片居中 */
        /* object-fit: cover;
        object-position: center center; */
        
       
    }
</style>